<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
	xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:rich="http://richfaces.org/rich">

<h:panelGroup id="panelgroup"
	rendered="#{!transaccionCompraVentaCajaBean.pageVoucher}">

	<script type="text/javascript">
		    $(document).ready(function () {
			    $("#modal-dialog-bg").hide();
			    $("#dlgCalculadora").hide();
			 	$("#dlgCalculadora").draggable();
			 	
		    	$("#formTransaccion\\:btnCalculadora").click(function(){
		    		$("#modal-dialog-bg").show();
		    		$("#dlgCalculadora").show();  		
		        });		        
		    });

		    function closeDlgCalculadora(){
		    	$("#modal-dialog-bg").hide();
	    		$("#dlgCalculadora").hide();  
			}
		</script>

	<h:outputStylesheet library="css" name="main.css" />

	<h:panelGroup
		rendered="#{transaccionCompraVentaCajaBean.loginBean.dlgLogin}">
		<div class="modal-dialog-bg"
			style="opacity: 0.4; width: 1366px; height: 902px;"></div>
		<div class="modal-dialog p6n-popup" style="left: 512.5px; top: 100px;">
			<div>AUTENTICACION</div>
			<h:form>
				<div class="modal-dialog-content">
					<div id="p6n-cloudsql-content">
						<div>
							<div
								class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
								<h:outputLabel value="Usuario y/o password invalidos"
									rendered="#{!transaccionCompraVentaCajaBean.loginBean.autenticado and transaccionCompraVentaCajaBean.loginBean.success}" />
							</div>
							<div class="p6n-api-consent-screen-inputs">
								<div class="p6n-api-consent-screen-input-section">
									<div class="p6n-api-consent-screen-label" style="width: 150px;">USUARIO</div>
									<div>
										<h:inputText id="txtUsuario"
											value="#{transaccionCompraVentaCajaBean.loginBean.usuario}"
											required="true" requiredMessage="Ingrese usuario"
											autocomplete="off" />
									</div>
								</div>
								<div
									class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
									<h:message for="txtUsuario" />
								</div>
								<div class="p6n-api-consent-screen-input-section">
									<div class="p6n-api-consent-screen-label" style="width: 150px;">PASSWORD</div>
									<div>
										<h:inputSecret id="txtPassword"
											value="#{transaccionCompraVentaCajaBean.loginBean.password}"
											required="true" requiredMessage="Ingrese password"
											autocomplete="off" />
									</div>
								</div>
								<div
									class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
									<h:message for="txtPassword" />
								</div>
							</div>
						</div>
						<br></br>
					</div>
				</div>

				<div class="modal-dialog-buttons">
					<br />
					<h:commandButton value="Aceptar"
						actionListener="#{transaccionCompraVentaCajaBean.loginBean.login()}"
						styleClass="action blue" onclick="onSubmitButton();" />
					<h:commandButton value="Cancelar"
						action="#{transaccionCompraVentaCajaBean.loginBean.setDlgLogin(false)}"
						immediate="true" styleClass="action" onclick="onSubmitButton();">
					</h:commandButton>
				</div>
			</h:form>
		</div>
	</h:panelGroup>

	<h:form id="formTransaccion">
		<p:focus context="formTransaccion"></p:focus>
		<br />
		<div style="margin-left: 50px;">
			<div>
				<div>
					<div class="p6n-api-app-section-box editable"
						style="margin-right: 380px;">
						<div class="p6n-api-app-section-title">
							<div class="p6n-api-app-section-collapse-icon"></div>
							<div class="p6n-api-app-section-title-text">
								<h:outputLabel
									value="#{transaccionCompraVentaCajaBean.caja.denominacion}" />
								<label>(<h:outputLabel
										value="#{transaccionCompraVentaCajaBean.caja.abreviatura}" />)
								</label>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<label>Estado:&nbsp;<h:outputLabel
										value="#{transaccionCompraVentaCajaBean.estadoaperturaCaja.denominacion}" />&nbsp;|&nbsp;<h:outputLabel
										value="#{transaccionCompraVentaCajaBean.estadomovimientoCaja.denominacion}" />
								</label>
							</div>
							<div class="p6n-api-app-section-description">Todas las
								operaciones son de responsabilidad del usuario en session</div>
						</div>
					</div>

					<h:panelGroup
						rendered="#{!transaccionCompraVentaCajaBean.validBean}">
						<div class="p6n-api-access-in-page-error" style="left: 416px;">
							<div>
								<div>
									<p>
										<h:messages />
									</p>
								</div>
								<div style="text-align: center;">
									<h:commandLink value="Cerrar"
										action="/caja/index?faces-redirect=true" immediate="true"
										styleClass="p6n-api-access-in-page-error-link" />
								</div>
							</div>
						</div>
						<div class="modal-dialog-bg"
							style="opacity: 0.4; width: 1366px; height: 802px;"></div>
					</h:panelGroup>

					<h:panelGroup
						rendered="#{!transaccionCompraVentaCajaBean.validateCompraVenta()}">
						<div class="p6n-api-access-in-page-error" style="left: 416px;">
							<div>
								<div>
									<p>
										<h:messages />
									</p>
								</div>
								<div style="text-align: center;">
									<h:commandLink value="Cerrar"
										action="/caja/operaciones/transaccionCompraventa?faces-redirect=true"
										styleClass="p6n-api-access-in-page-error-link" />
								</div>
							</div>
						</div>
						<div class="modal-dialog-bg"
							style="opacity: 0.4; width: 1366px; height: 802px;"></div>
					</h:panelGroup>

					<h:panelGroup
						rendered="#{!transaccionCompraVentaCajaBean.validateSaldoTotalCaja}">
						<div class="p6n-api-access-in-page-error" style="left: 416px;">
							<div>
								<div>
									<p>
										<h:messages />
									</p>
								</div>
								<div style="text-align: center;">
									<h:commandLink value="Cerrar"
										action="/caja/operaciones/transaccionCompraventa?faces-redirect=true"
										styleClass="p6n-api-access-in-page-error-link" />
								</div>
							</div>
						</div>
						<div class="modal-dialog-bg"
							style="opacity: 0.4; width: 1366px; height: 802px;"></div>
					</h:panelGroup>
					
					<br /> <br />
					<div class="p6n-api-consent-screen-title">COMPRA Y VENTA DE
						MONEDA EXTRANJERA</div>
					<div class="p6n-api-consent-screen-inputs">

						<div class="p6n-api-consent-screen-input-section">
							<div class="p6n-api-consent-screen-label" style="width: 150px;">TIPO
								TRANSACCION</div>
							<div>
								<h:selectOneMenu id="cmbTipoTransaccionCV"
									value="#{transaccionCompraVentaCajaBean.comboTipotransaccion.itemSelected}"
									valueChangeListener="#{transaccionCompraVentaCajaBean.changeTipoTransaccion}"
									required="true"
									requiredMessage="Seleccione tipo de transaccion">
									<f:selectItem itemLabel="--Seleccione--" itemValue="" />
									<f:selectItems
										value="#{transaccionCompraVentaCajaBean.comboTipotransaccion.items.entrySet()}"
										var="val" itemLabel="#{val.value.abreviatura}"
										itemValue="#{val.key}" />
									<f:ajax event="change" execute="@this"
										listener="#{transaccionCompraVentaCajaBean.cagarTipoCambio()}"
										render="oupTipoCambio optCompraVenta optMontoTotal txtMontoRecibido txtMontoTotal"/>
								</h:selectOneMenu>
							</div>
						</div>
						<div
							class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
							<h:message for="cmbTipoTransaccionCV" />
						</div>

						<h:panelGrid columns="3">
							<p:outputPanel>
								<div class="p6n-api-consent-screen-input-section">
									<div class="p6n-api-consent-screen-label" style="width: 100px;">DNI
										o RUC</div>
									<div style="float: left;">
										<h:inputText id="txtDniRuc" required="true"
											requiredMessage="Ingrese DNI o Ruc" autocomplete="off"
											value="#{transaccionCompraVentaCajaBean.dniRuc}" size="15"
											maxlength="11" validatorMessage="Dni o Ruc Invalido">
											<f:validateRegex pattern="((?=.*[0-9]).{8,})" />
											<f:ajax event="blur" render="@this txtNombresRazonSocial"
												listener="#{transaccionCompraVentaCajaBean.retornarNombresRazonSocial()}" />
										</h:inputText>
									</div>
								</div>
								<div
									class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
									<h:message for="txtDniRuc" />
								</div>
							</p:outputPanel>


							<p:outputPanel>
								<div class="p6n-api-consent-screen-input-section">
									<div class="p6n-api-consent-screen-label" style="width: 150px;">NOMBRES
										o RAZON SOCIAL</div>
									<div style="float: left;">
										<h:inputText id="txtNombresRazonSocial" required="true"
											requiredMessage="Ingrese Nombres o Razon Social" autocomplete="off"
											value="#{transaccionCompraVentaCajaBean.nombresRazonSocial}"
											onkeyup="this.value = this.value.toUpperCase();" size="50"
											maxlenght="200">
										</h:inputText>
									</div>
								</div>
								<div
									class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
									<h:message for="txtNombresRazonSocial" />
								</div>
							</p:outputPanel>
						</h:panelGrid>

						<div class="sf-separator"></div>

						<h:panelGrid columns="3">
							<p:outputPanel>
								<div class="p6n-api-consent-screen-input-section">
									<div class="p6n-api-consent-screen-label" style="width: 190px;">TIPO
										MONEDA RECIBIDA</div>
									<div>
										<h:selectOneMenu id="cmbTipomonedaRecibida"
											value="#{transaccionCompraVentaCajaBean.comboTipomonedaRecibido.itemSelected}"
											valueChangeListener="#{transaccionCompraVentaCajaBean.changeTipomonedaRecibido}"
											required="true"
											requiredMessage="Seleccione tipo de moneda recibida">
											<f:selectItem itemLabel="--Seleccione--" itemValue="" />
											<f:selectItems
												value="#{transaccionCompraVentaCajaBean.comboTipomonedaRecibido.items.entrySet()}"
												var="val" itemLabel="#{val.value.denominacion}"
												itemValue="#{val.key}" />
											<f:ajax execute="@this" />
											<f:ajax event="change"
												listener="#{transaccionCompraVentaCajaBean.cagarTipoCambio()}"
												render="oupTipoCambio txtMontoRecibido txtMontoTotal :formCalculadora optMoneda1 optMoneda2" />
										</h:selectOneMenu>
									</div>
								</div>
								<div
									class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
									<h:message for="cmbTipomonedaRecibida" />
								</div>
							</p:outputPanel>

							<p:outputPanel>
								<div class="p6n-api-consent-screen-input-section">
									<div class="p6n-api-consent-screen-label" style="width: 150px;">TIPO
										MONEDA ENTREGADO</div>
									<div>
										<h:selectOneMenu id="cmbTipomonedaEntregada"
											value="#{transaccionCompraVentaCajaBean.comboTipomonedaEntregado.itemSelected}"
											valueChangeListener="#{transaccionCompraVentaCajaBean.changeTipomonedaEntregado}"
											required="true"
											requiredMessage="Seleccione tipo de moneda entregada">
											<f:selectItem itemLabel="--Seleccione--" itemValue="" />
											<f:selectItems
												value="#{transaccionCompraVentaCajaBean.comboTipomonedaEntregado.items.entrySet()}"
												var="val" itemLabel="#{val.value.denominacion}"
												itemValue="#{val.key}" />
											<f:ajax execute="@this" />
											<f:ajax event="change"
												listener="#{transaccionCompraVentaCajaBean.cagarTipoCambio()}"
												render="oupTipoCambio txtMontoRecibido txtMontoTotal optMoneda1 optMoneda2 " />
											<!--se actualizan los siguientes datos    <f:ajax render="txtMonto :formCalculadora" />  -->
										</h:selectOneMenu>
									</div>
								</div>
								<div
									class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
									<h:message for="cmbTipomonedaEntregada" />
								</div>
							</p:outputPanel>
						</h:panelGrid>

						<div class="p6n-api-consent-screen-input-section">
							<div class="p6n-api-consent-screen-label" style="width: 150px;">TIPO
								DE CAMBIO</div>
							<div style="float: left;">
								&nbsp;
								<h:panelGroup rendered="#{!transaccionCompraVentaCajaBean.loginBean.autenticado}">
									<h:outputLabel id="oupTipoCambio" value="#{transaccionCompraVentaCajaBean.tipoCambio}"/>
									&nbsp;&nbsp;&nbsp;&nbsp;
									<h:commandLink action="#{transaccionCompraVentaCajaBean.loginBean.setDlgLogin(true)}" >
										<h:outputText value="Editar" />
									</h:commandLink>
								</h:panelGroup>
								
								<h:panelGroup rendered="#{transaccionCompraVentaCajaBean.loginBean.autenticado}">
									<h:inputText id="txtTipoCambio" size="5"
										value="#{transaccionCompraVentaCajaBean.tipoCambio}"
										required="true" maxlenght="5"
										requiredMessage="Ingrese el tipo de cambio">
										<f:converter converterId="TasaCambioConverter"></f:converter>
										<f:ajax event="blur"
											listener="#{transaccionCompraVentaCajaBean.calculateMontoTotal()}"
											render="txtMontoTotal @this" />
									</h:inputText>
								</h:panelGroup>
								<br />
							</div>
						</div>

						<h:panelGrid columns="2">
							<p:outputPanel>
								<div class="p6n-api-consent-screen-input-section">
									<div class="p6n-api-consent-screen-label" style="width: 115px;">
										<h:panelGroup id="optCompraVenta">
											<h:outputText value="MONTO DE COMPRA" rendered="#{transaccionCompraVentaCajaBean.compra}"/>
											<h:outputText value="MONTO DE VENTA" rendered="#{transaccionCompraVentaCajaBean.venta}"/>
										</h:panelGroup>
									</div>
									<div style="float: left;">
										<h:panelGroup id="optMoneda1">
											<h:outputText style="text-align: center; font-weight: bold; font-size: 15px; vertical-align: bottom" value="#{transaccionCompraVentaCajaBean.comboTipomonedaRecibido.objectItemSelected.abreviatura}" rendered="#{transaccionCompraVentaCajaBean.compra}"/>
											<h:outputText style="text-align: center; font-weight: bold; font-size: 15px; vertical-align: bottom" value="#{transaccionCompraVentaCajaBean.comboTipomonedaEntregado.objectItemSelected.abreviatura}" rendered="#{transaccionCompraVentaCajaBean.venta}"/>
										</h:panelGroup>
										<h:inputText id="txtMontoRecibido" size="15"
											value="#{transaccionCompraVentaCajaBean.montoRecibido}"
											required="true" maxlenght="16"
											requiredMessage="Ingrese el monto a recibir"
											validatorMessage="Monto recibido Invalido">
											<f:converter converterId="MonedaConverter"></f:converter>
											<f:ajax event="blur"
												listener="#{transaccionCompraVentaCajaBean.calculateMontoTotal()}"
												render="txtMontoTotal" />
										</h:inputText>
									</div>

									<div style="float: left;">
										<h:outputLink id="btnCalculadora" value="#"
											styleClass="button" style="margin: 0 0 0 1px;">
											<span class="icon icon32"></span>
										</h:outputLink>
									</div>
								</div>
							</p:outputPanel>

							<p:outputPanel>
								<div class="p6n-api-consent-screen-input-section">
									<div class="p6n-api-consent-screen-label" style="width: 150px;">
										<h:panelGroup id="optMontoTotal">
											<h:outputText value="MONTO A ENTREGAR" rendered="#{transaccionCompraVentaCajaBean.compra}"/>
											<h:outputText value="MONTO A RECIBIR" rendered="#{transaccionCompraVentaCajaBean.venta}"/>
										</h:panelGroup>
									</div>
									<div style="float: left;">
										<h:panelGroup id="optMoneda2">
											<h:outputText style="text-align: center; font-weight: bold; font-size: 15px; vertical-align: bottom" value="#{transaccionCompraVentaCajaBean.comboTipomonedaRecibido.objectItemSelected.abreviatura}" rendered="#{transaccionCompraVentaCajaBean.venta}"/>
											<h:outputText style="text-align: center; font-weight: bold; font-size: 15px; vertical-align: bottom" value="#{transaccionCompraVentaCajaBean.comboTipomonedaEntregado.objectItemSelected.abreviatura}" rendered="#{transaccionCompraVentaCajaBean.compra}"/>
										</h:panelGroup>
										<h:outputText style="font-weight: bold; font-size: 12px; vertical-align: bottom" id="txtMontoTotal" value=" #{transaccionCompraVentaCajaBean.montoEntregado}">
											<f:converter converterId="MonedaConverter"></f:converter>
										</h:outputText>
									</div>
								</div>
							</p:outputPanel>
						</h:panelGrid>

						<div class="sf-separator"></div>

						<div class="sf-buttons" style="float: left;">
							<h:commandButton id="btnAceptar"
								action="#{transaccionCompraVentaCajaBean.createTransaccioncaja()}"
								value="Aceptar" styleClass="action blue">
							</h:commandButton>
						</div>
					</div>
				</div>
			</div>
		</div>
	</h:form>

	<div id="dlgCalculadora" class="modal-dialog p6n-popup"
		style="left: 412.5px; top: 5px;">
		<div class="p6n-api-consent-screen-title" style="text-align: center;">CALCULADORA</div>

		<h:form id="formCalculadora">
			<div class="modal-dialog-content">
				<div>
					<div>
						<table>
							<thead>
								<tr>
									<td style="text-align: right;">
										<div class="p6n-api-consent-screen-label"
											style="width: 100px;">DENOMINACION</div>
									</td>
									<td style="width: 20px;"></td>
									<td><div class="p6n-api-consent-screen-label"
											style="width: 150px;">CANTIDAD</div></td>
									<td style="width: 20px;"></td>
									<td><div class="p6n-api-consent-screen-label"
											style="width: 110px;">TOTAL</div></td>
								</tr>
							</thead>
							<tbody>
								<ui:repeat
									value="#{transaccionCompraVentaCajaBean.calculadoraBeanRecibido.list}"
									var="detalle">
									<tr>
										<td style="text-align: right; vertical-align: middle;"><h:outputLabel
												value="#{detalle.denominacionmoneda.denominacion}" /></td>
										<td></td>
										<td style="padding: 0px;"><h:inputText
												value="#{detalle.cantidad}" required="true" maxlength="6"
												styleClass="jfk-textinput p6n-api-consent-screen-homepage-url label-input-label"
												style="width:150px;">
												<f:ajax event="blur"
													render="txtSubtotal :formCalculadora:panelTotalTransaccion" />
											</h:inputText></td>
										<td></td>
										<td><h:outputLabel id="txtSubtotal"
												value="#{detalle.getSubtotal()}"
												style="width: 110px; vertical-align: middle;" /></td>
									</tr>
								</ui:repeat>
							</tbody>
						</table>
					</div>
					<h:panelGroup id="panelTotalTransaccion">
						<div style="margin-left: 250px;">
							<label>TOTAL:</label>
							<h:outputLabel id="txtTotal"
								value="#{transaccionCompraVentaCajaBean.calculadoraBeanRecibido.getTotal()}">
							</h:outputLabel>
						</div>
					</h:panelGroup>
				</div>
			</div>
			<div class="modal-dialog-buttons">
				<h:commandButton value="Guardar" styleClass="action blue">
					<f:ajax execute="@form"
						listener="#{transaccionCompraVentaCajaBean.setMontoFromCalculadora()}"
						render="formCalculadora :formTransaccion:txtMontoRecibido :formTransaccion:txtMontoTotal"
						onevent="closeDlgCalculadora">
					</f:ajax>
					<f:ajax
						listener="#{transaccionCompraVentaCajaBean.calculateMontoTotal()}"
						render=":formTransaccion:txtMontoRecibido :formTransaccion:txtMontoTotal">
					</f:ajax>
				</h:commandButton>
				<input type="button" value="Cancelar" class="action"
					onclick="closeDlgCalculadora()" />
			</div>
		</h:form>
	</div>
	<div id="modal-dialog-bg" class="modal-dialog-bg"
		style="opacity: 0.4; width: 1366px; height: 802px;"></div>
</h:panelGroup>

</html>